<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="openItemDialog(false)">添加分级</el-button>
        <el-button type="primary" @click="openCustomDialog(false)">添加客户</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="等级" prop="code" min-width="100" align="center"></el-table-column>
        <el-table-column label="名称" prop="name" min-width="100" align="center"></el-table-column>
        <el-table-column label="描述" prop="remark" min-width="100" align="center"></el-table-column>
        <el-table-column label="年消费金额范围" prop="maxValue" min-width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.minValue > -1 && scope.row.maxValue > -1">{{scope.row.minValue}} ~ {{scope.row.maxValue}}</span>
            <span v-if="scope.row.minValue > -1 && scope.row.maxValue === -1">不低于{{scope.row.minValue}}</span>
            <span v-if="scope.row.minValue === -1 && scope.row.maxValue === -1">无限制</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" align="center">
          <template slot-scope="scope">
            <el-button @click="openItemDialog(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="removeLevel(scope.row.code)" type="text" size="small">删除</el-button>
            <el-button @click="openCountryDialog(scope.row.code, true, true)" type="text" size="small">客户列表</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="客户分级管理" :visible.sync="itemDialog" width="600px" :close-on-click-modal="false"> 
      <el-form :model="form" style="padding-right:100px;padding-left: 50px;" label-width="140px">
        <el-form-item label="等级：">
          <el-input :disabled="formStatus === 'edit'" v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="名称：">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item label="年消费金额范围：">
          <el-input style="width: 125px;" v-model="form.minValue"></el-input>
          ~
          <el-input style="width: 128px;" v-model="form.maxValue"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="itemDialog = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="客户管理" :visible.sync="countryDialog" width="1280px" :close-on-click-modal="false"> 
      <div>
        <el-form :inline="true">
          <el-form-item label="客户名称">
            <el-input v-model="customerName"></el-input>
          </el-form-item>
          <el-form-item> 
            <el-button type="primary" @click="searchCustorm()">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table max-height="500" :data="countryData" border style="width: 100%">
          <el-table-column label="客户名称" prop="name" min-width="100" align="center"></el-table-column>
          <el-table-column label="客户编号" prop="code" min-width="100" align="center"></el-table-column>
          <el-table-column label="级别" prop="levelCode" min-width="100" align="center"></el-table-column>
          <el-table-column label="国家" prop="countryName" min-width="100" align="center"></el-table-column>
          <el-table-column label="经理" prop="contactPerson" min-width="100" align="center"></el-table-column>
          <el-table-column label="平台来源" prop="fromPlat" min-width="100" align="center"></el-table-column>
          <el-table-column label="首次下单时间" prop="settingDate" min-width="120" align="center"></el-table-column>
          <el-table-column label="升级日期" prop="upgradeDate" min-width="100" align="center"></el-table-column>
          <el-table-column label="是否独代" prop="isSole" min-width="100" align="center">
            <template slot-scope="scope">
              {{scope.row.isSole === 1? '是': '否'}}
            </template>
          </el-table-column>
          <el-table-column label="销售负责人" prop="salorName" min-width="100" align="center"></el-table-column>
          <el-table-column label="是否跟单" prop="isFollow" min-width="100" align="center">
            <template slot-scope="scope">
              {{scope.row.isFollow === 1? '是': '否'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="100" align="center">
            <template slot-scope="scope">
              <el-button @click="openCustomDialog(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="removeItem(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="countryDialog = false">取 消</el-button>
        <el-button type="primary" @click="countryDialog = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :fullscreen="true" :visible.sync="customerDialog" :show-close="false">
      <div slot="title">
        <h2 style="text-align:center;margin-bottom:0;">客户管理</h2>
      </div>
      <div class="form-wrapper">
        <el-button type="info" class="back-btn" icon="el-icon-back" circle @click="customerDialog = false;"></el-button>
        <el-form ref="form" :model="customForm" label-width="200px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="客户名称">
                <el-input v-model="customForm.name"></el-input>
              </el-form-item>
            </el-col>
           <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="客户编号">
                <el-input v-model="customForm.code"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="级别">
                 <el-select v-model="customForm.levelCode" placeholder="请选择客户级别">
                  <el-option v-for="item in tableData" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="国家">
                <el-select ref="labelSelected" :filterable="true" v-model="customForm.countryCode" placeholder="请选择国家">
                  <el-option v-for="item in countryList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="经理">
                <el-input v-model="customForm.contactPerson"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="平台来源">
                <el-select ref="labelSelected2" :filterable="true" v-model="customForm.fromPlatId" placeholder="请选择平台">
                  <el-option v-for="item in platList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="设立时间">
                <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="customForm.createDate" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="升级日期">
                <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="customForm.upgradeDate" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="销售负责人">
                <el-input placeholder="请选择" style="width: calc(100% - 75px);" v-model="customForm.salorName" :disabled="true"></el-input>
                <el-button @click="selectDingUsers()">选择</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="是否跟单">
                <el-select :filterable="true" v-model="customForm.isFollow" placeholder="请选择是否跟单">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="是否独代">
                <el-select :filterable="true" v-model="customForm.isSole" placeholder="请选择是否独代">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="font-weight: bold;" label="首次下单日期">
                <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="customForm.settingDate" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
           <el-form-item>
            <el-button type="primary" @click="saveCostom">保存</el-button>
            <el-button @click="customerDialog = false;">关闭</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import formUtil from '@/utils/formUtil'

  export default {
    data () {
      return {
        pageSize: 10,
        page:1,
        totalPage: 0,
        customerDialog: false,
        itemDialog: false,
        countryDialog: false,
        countryData: [],
        platList: [],
        customForm: {
          contactPerson: '',
          countryCode: '',
          countryName: '',
          fromPlat: '',
          fromPlatId: '',
          id: '',
          isFollow: '',
          isSole: '',
          levelCode: '',
          name: '',
          salorId: '',
          salorName: '',
          createDate: '',
          upgradeDate: '',
          settingDate: '',
          code: ''
        },
        customFormVerify: {
          code: '请输入客户编号',
          contactPerson: '请输入经理',
          countryCode: '请输入国家',
          fromPlatId: '请输入平台来源',
          isFollow: '请输入是否跟单',
          isSole: '请输入是否独代',
          levelCode: '请输入级别',
          name: '请输入客户名称',
          salorId: '请输入销售负责人',
          createDate: '请输入首次下单时间',
          upgradeDate: '请输入升级日期',
        },
        form: {
          code: '',
          name: '',
          remake: '',
          minValue: '',
          maxValue: ''
        },
        formVerify: {
          code: '请输入等级',
          name: '请输入名称'
        },
        tableData: [],
        countryDataCopy: [],
        changeDataCache: {},
        countryList:[],
        currentLevel: '',
        customerName: '',
        formStatus: 'add'
      }
    },
    components:{

    },
    mixins: [dingMixin],
    async mounted(){
      await this.searchItem();
      await this.getCountryList();
    },
    methods: {
      selectDingUsers(ids, name, idsStr){
        this.complexPicker(1, [], []).then((data)=>{
          this.customForm.salorId = data[0].emplId;
          this.customForm.salorName = data[0].name;
        })
      },
      async getCountryList() {
        this.countryList = await this.$httpN.postQ('mpb/market/listCountry', {level: '', query: ''}, false);
        this.platList = await this.$httpN.postQ('mpb/plat/tree');
      },
      openCustomDialog(item) {
        if(item) {
          let editData = formUtil.deepCopy(item);
          this.customForm = editData;
          this.formStatus = 'edit'
        }else{
          formUtil.resetData(this.customForm);
          this.formStatus = 'add'
        }
        this.customerDialog = true;
      },
      openItemDialog(item) {
        if(item) {
          let editData = formUtil.deepCopy(item);
          if(editData.maxValue === -1) editData.maxValue = '';
          if(editData.minValue === -1) editData.minValue = '';
          this.form = editData;
        }else{
          formUtil.resetData(this.form);
        }
        this.itemDialog = true;
      },
      removeLevel(id) {
        formUtil.submitConfirm('此操作将永久删除客户分级, 是否继续?', async ()=> {
          if(!await this.$httpN.postB('mpb/customer/deleteLevel', [id], false)) return;
          formUtil.submitSuccess('删除成功');
          this.searchItem()
        })
      },
      removeItem(id) {
        formUtil.submitConfirm('此操作将永久删除客户, 是否继续?', async ()=> {
          if(!await this.$httpN.postB('mpb/customer/delete', [id], false)) return;
          formUtil.submitSuccess('删除成功');
          this.openCountryDialog(this.currentLevel, true)
        })
      },
      async searchItem() {
        this.tableData = await this.$httpN.get('mpb/customer/listLevel')
      },
      async save() {
        if((this.form.minValue && isNaN(this.form.minValue))) return this.$message.error('年最小金额必须是数字');
        if((this.form.maxValue && isNaN(this.form.maxValue))) return this.$message.error('年最大金额必须是数字');

        if(!formUtil.verifyData(this.form, this.formVerify)) return;
        if(!await this.$httpN.postB('mpb/customer/saveLevel', this.form)) return;
        this.itemDialog = false;
        formUtil.submitSuccess('保存成功');
        this.searchItem()
      },
      async saveCostom() {
        this.customForm.countryName = this.$refs['labelSelected'].selectedLabel;
        this.customForm.fromPlat = this.$refs['labelSelected2'].selectedLabel;
        if(!formUtil.verifyData(this.customForm, this.customFormVerify)) return;
        if(!await this.$httpN.postB('mpb/customer/save', this.customForm)) return;
        this.customerDialog = false;
        formUtil.submitSuccess('保存成功');
        if(this.customForm.id) {
          this.openCountryDialog(this.currentLevel, true)
        }
      },
      async openCountryDialog(level, init, initName = false) {
        if(init) {
          this.page = 1;
          this.currentLevel = level;
        }
        if(initName) this.customerName = '';
        let data = await this.$httpN.postB('mpb/customer/list', {
          customerLevel: this.currentLevel,
          customerName: this.customerName,
          page: this.page,
          limit: this.pageSize
        })
        this.countryData = data.list;
        this.totalPage = data.totalCount
        if(init) this.countryDialog = true;
      },
      searchCustorm() {
        this.openCountryDialog(this.currentLevel, true)
      },
      sizeChangeHandle(limit) {
        this.pageSize = limit;
        this.openCountryDialog(this.currentLevel, true);
      },
      currentChangeHandle(page) {
        this.page = page;
        this.openCountryDialog();
      },
      saveChange(value, key) {
        this.changeDataCache[key] = value;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .form-wrapper .el-select.el-select--medium{
    width: 100%;
  }
  .form-wrapper{
    width: 70%;
    margin: 0 auto;
    padding: 70px;
    min-width: 990px;
    padding-top: 10px;
    padding-left:0;
    position:relative;
  }
  .status-line{
    position:fixed;
    top: 200px;
    right: 140px;
    height: 240px;
  }
  .notice{
    margin-top:10px;
    color:red;
    padding-left:120px;
  }
  .back-btn{
    position: fixed;
    top: 50px;
    left: 50px;
  }
</style>